<template>
  <section>
    <!-- 更新/详情 -->
    <el-form v-if="type==='update' || type==='detail'" ref="form" :model="form" label-width="120px">
      <el-form-item label="数据源名称">
        <el-input v-if="type==='update'" v-model="formData.name"></el-input>
        <span v-if="type==='detail'">{{formData.name}}</span>
      </el-form-item>
      <el-form-item
        v-show="item.type==='select'&& item.modelData!=='libraryTypeId' || item.show=== dbType "
        :label="item.label"
        v-for="(item,index) in formLabel"
        :key="index"
        v-if="type!='detail'"
      >
        <!-- 所属网段 -->
        <el-select
          v-if="item.type==='select' && item.modelData==='segmentId'"
          v-model="formData.segmentId"
          @change="emitSelectWangduan"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.id"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <!-- 所属区域-->
        <el-select
          v-if="item.type==='select' && item.modelData!='segmentId'  && item.modelData!='typeId' && item.modelData!='libraryTypeId'"
          v-model="formData.areaId"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.id"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <!-- 类型 -->
        <el-select
          v-if="item.type==='select' && item.modelData==='typeId'"
          v-model="formData.typeId"
          @change="emitSelectType"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.id"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <!-- 数据库类型 -->
        <el-select
          v-if="item.show==='db'&&item.type==='select' && item.modelData==='libraryTypeId'"
          v-model="formData.libraryTypeId"
          @change="emitSelectType"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.id"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <!-- 数据库地址 -->
        <el-input
          v-if="item.type==='input'&&item.modelData==='address'"
          v-model="formData.address"
          :placeholder="item.placehold"
        ></el-input>
        <!-- 数据库名称 -->
        <el-input
          v-if="item.type==='input'&&item.modelData==='dataBaseName'"
          v-model="formData.dataBaseName"
          :placeholder="item.placehold"
        ></el-input>
        <!-- 文件目录 -->
        <el-input
          v-if="item.type==='input'&&item.modelData==='filePath'"
          v-model="formData.filePath"
          :placeholder="item.placehold"
        ></el-input>
        <!-- 端口号 -->
        <el-input
          v-if="item.type==='input'&&item.modelData==='port'"
          v-model="formData.port"
          :placeholder="item.placehold"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="type==='update'" label="用户名">
        <el-input v-model="formData.username"></el-input>
        <!-- <span v-if="type==='detail'">{{formData.username}}</span> -->
      </el-form-item>
      <el-form-item v-if="type==='update'" label="密码">
        <el-input v-model="formData.password"></el-input>
        <!-- <span v-if="type==='detail'">{{formData.password}}</span> -->
      </el-form-item>
      <!-- 详情显示 -->
      <el-form-item v-if="type==='detail'" label="类型">
        <span v-if="formData.typeId===3">数据库</span>
        <span v-if="formData.typeId===2">ftp</span>
      </el-form-item>
      <el-form-item v-if="type==='detail'" label="所属区域">
        <span>{{formData.areaId}}</span>
      </el-form-item>
      <el-form-item v-if="type==='detail'" label="数据库类型">
        <span>{{formData.libraryTypeId}}</span>
      </el-form-item>
      <!--<el-form-item v-if="type==='detail'" label="数据库版本">
        <span>{{formData.dataSourceVersion}}</span>
      </el-form-item>-->
      <el-form-item v-if="type==='detail'" label="数据库地址">
        <span>{{formData.address}}</span>
      </el-form-item>
      <el-form-item v-if="type==='detail'" label="数据库名称">
        <span>{{formData.dataBaseName}}</span>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-if="type==='update'" type="textarea" v-model="formData.describe"></el-input>
        <span v-if="type==='detail'">{{formData.describe}}</span>
      </el-form-item>
      <span class="ceshi">
        <i  v-if="type ==='detail'">测试联通性</i>
        <!--<span v-if="type ==='update'">测试结果</span>-->
        <span v-if="type ==='detail'">{{formData.isConn ===0?'链接不通':'链接成功'}}</span>
      </span>
      <el-form-item>
        <el-button v-if="type!='detail'" type="primary" @click="onSubmit">确定</el-button>
        <el-button v-if="type!='detail'" @click="$emit('closeForm')">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增 -->
    <el-form 
      v-if="type==='add'" 
      ref="form" 
      :model="form" 
      :rules="rules"
      label-width="120px"
    >
      <el-form-item
        v-show="item.show==='normal' || item.show=== dbType"
        :label="item.label"
        v-for="(item,index) in formLabel"
        :key="index"
        v-if="type!='detail'"
        :prop="item.modelData"
      >
        <el-input
          v-if="item.type==='input'"
          v-model="form[item.modelData]"
          :placeholder="item.placehold"
        ></el-input>
        <el-select
          v-if="item.type==='select' && item.modelData!='segmentId'  && item.modelData!='typeId'"
          v-model="form[item.modelData]"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.value"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <el-select
          v-if="item.type==='select' && item.modelData==='segmentId'"
          v-model="form[item.modelData]"
          @change="emitSelectWangduan"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.value"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <el-select
          v-if="item.type==='select' && item.modelData==='typeId'"
          v-model="form[item.modelData]"
          @change="emitSelectType"
        >
          <el-option
            v-for="optionsItem in item.options"
            :key="optionsItem.value"
            :label="optionsItem.name"
            :value="optionsItem.id"
          ></el-option>
        </el-select>
        <el-input v-if="item.type==='textarea'" type="textarea" v-model="form[item.modelData]"></el-input>
      </el-form-item>
      <!--<span class="ceshi" v-if="type!='detail'">
        <i>测试联通性</i>测试结果
      </span>-->
      <el-form-item v-if="type!='detail'">
        <el-button type="primary" @click="onSubmit('form')">确定</el-button>
        <el-button @click="closeButton">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  props: {
    type: "",
    content: "",
    formLabel: Array,
    formData: Object,
    resetFields: '',
  },
  data() {
    return {
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        address: [
        ],
        areaId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        dataBaseName: [
        ],
//      libraryTypeId: [
//        { required: true, message: '请选择', trigger: 'change' }
//      ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        segmentId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        typeId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        filePath: [
        ],
        port: [
        ],
      },
      dbType: ""
    };
  },
  methods: {
    onSubmit(formName) {
      if (this.type === "add") {
      	console.log(this.form);
      	
      	if(this.dbType === "db" && !(this.form.hasOwnProperty('libraryTypeId'))){
      		  this.$message({
              showClose: true,
              message: '请选择数据库类型',
              type: 'error'
            });
            return false;
      	}
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
            this.$emit("insertData", this.form);
            //清空上条数据
            setTimeout(()=>{
              this.form = {};
              this.$refs.form.resetFields();
              this.$emit('closeForm');
            },100);
          } else {
            console.log('error submit!!');
            this.$message({
              showClose: true,
              message: '请填写必要信息',
              type: 'success'
            });
            return false;
          }
        });
        
      } else if (this.type === "update") {
        this.$emit("insertData", this.formData);
      }
    },
    closeButton(){
      this.$refs.form.resetFields();
      this.$emit('closeForm');
      this.form = {};
    },
    emitSelectWangduan(val) {
      this.$emit("emitSelectWangduan", val);
    },
    emitSelectType(val) {
      if (val === 3) {
        this.dbType = "db";
      } else if (val === 2) {
        this.dbType = "ftp";
      }
    }
  },
  watch: {
    type(newVal) {
      console.log(newVal);
    },
    //获取下拉框值
    formData() {
      this.emitSelectType(this.formData.typeId);
    },
    form: {
      handler(newVal){
        console.log(newVal);
        if(newVal.typeId===2){
        this.rules.dataBaseName = [];
        this.rules.filePath = [
          { required: true, message: '请输入文件目录', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ];
        this.rules.port = [
          { required: true, message: '请输入端口号', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ];
        this.rules.address = [
          { required: true, message: '请输入数据库地址', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ];
      }else if(newVal.typeId===3){
        this.rules.filePath = [];
        this.rules.port = [];
        this.rules.address = [
          { required: true, message: '请输入数据库地址', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ];
        this.rules.dataBaseName = [
          { required: true, message: '请输入数据库名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ];
      }
      },
      deep: true
    },
    resetFields: function(val){
      console.log("resetFieldsChange")
      this.$refs.form.resetFields();
      this.form = {};
    },
  },
  computed: {
    
  }
};
</script>

<style scoped="scoped">
.ceshi i {
  margin: 0 17px 0 15px;
  display: inline-block;
  width: 110px;
  background: #5a8bff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 30px;
  color: #fff;
  margin-bottom: 15px;
}
</style>